<template>
  <div>
    <OrderHeader title="订单列表">
      <template v-slot:tip>
          <span>订单列表</span>
      </template>
    </OrderHeader>
    <div class="order-list">
      <div class="wrapper">
        <div class="container">
          <div class="order-box">
            <!-- <loading v-if="loading"></loading> -->
            <div class="order"  v-for="(item,index) in orderList" :key="index">
              <div class="order-title">
                <div class="item-info ">
                  订单创建时间：{{item.createdAt}}
                  <span>|</span>
                  {{item.shops_name}}
                  <span>|</span>
                  订单号：{{item.order_id}}
                  <span>|</span>
                  支付订单
                </div>
                <div class="item-money ">
                  <span>应付金额：</span>
                  <span class="money">{{item.total_price}}</span>
                  <span>元</span>
                </div>
              </div> 
              <div class="order-content">
                <div class="good-box">
                  <div class="good-list" v-for="(i,index) in item.goods_info" :key="index">
                    <div class="good-img">
                      <img v-lazy="i.s_photos[0].path" alt="">
                    </div>
                    <div class="good-name">
                      <div class="p-name">{{i.goods_name}}</div>
                      <div class="p-money">{{i.sale_price}}元*{{i.num}}</div>
                    </div>
                  </div>
                </div>
                <div class="good-state " v-if="item.payment != null">
                  <a href="javascript:;">已支付</a>
                  <!-- <a href="javascript:;">{{order.statusDesc}}</a> -->
                </div>
                <div class="good-state " v-else >
                  <span>未支付</span>
                  <div class="btn-group">
                        <a href="javascript:;" class="btn btn-default" @click="cancelOrder(item)">取消订单</a>
                        <a href="javascript:;" class="btn btn-default" @click="goPay(item)">立即支付</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div>
            <a href="javascript:;" @click="previous">上一页</a>
            <a href="javascript:;" @click="next">下一页</a>
          </div> -->
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              @current-change="handleChange"
            >
            </el-pagination>
        </div>
      </div>      
    </div>

  </div>
</template>

<script>
import OrderHeader from '../components/OrderHeader'
import {Data} from '../assets/js/request'
import {Pagination} from 'element-ui'
import api from '../assets/js/api'
import http from '../assets/js/http'
export default {
    components:{
      OrderHeader,
      [Pagination.name]:Pagination
    },
    data(){
      return {
        goodList:[],    //没一条支付订单里的商品
        orderList:[],   //支付订单列表
        pageNum:1,
        total:null,
        pageSize:5,
      }
    },
    created(){
      this.getData()
    },
    methods:{
      //取消订单
      async cancelOrder(item){
        console.log(item.shop_id);
        await http.delete(api.order+"/"+item.shop_id)
        this.getData()
      },
      //去支付
      goPay(item){
        console.log(item);
        this.$router.push({
          path:`/order/orderPay/`,
          query:{
            id:item.shop_id,
            total:item.total_price
          }
        })
      },
      //时间格式转换
      Rtime(date){
        let json_date = new Date(date).toJSON()
        return new Date(new Date(json_date)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'') 
      },

      //获取数据
      async getData(){
        let res = await Data('get','order',{limit:this.pageSize,page:this.pageNum})
        console.log(res)
        this.total = res.count
        this.orderList =  res.rows.map(ele => {
          // console.log(ele.id);
          ele.createdAt =  this.Rtime(ele.createdAt)    //修改时间格式
          return {
            createdAt:ele.createdAt,
            order_id:ele.order_id,
            shops_name:ele.shops_name,
            total_price:ele.total_price,
            goods_info:JSON.parse(ele.goods_info),
            payment:ele.payment,
            shop_id:ele.id    //取消订单用
          }
        })
        console.log(this.orderList);
      },
      handleChange(pageNum){
        this.pageNum = pageNum
        this.getData()
      }
      
    }
}

// records:0,      //总页数
// page:1,         //默认第一页
// perPage:5,      //每页显示的数据
// pageNo:1,       //当前页
// currentPageData:[], //每页存储的数据
//数据切割(没用的)
// async Render(){
//   // console.log(res.rows);
//   // this.records = Math.ceil(this.orderList.length / this.perPage)    //四舍五入
//   // console.log(this.records);

//   // //数据的切割
//   // this.records = this.records == 0 ? 1 : this.records
//   // let begin = (this.page - 1) * this.perPage
//   // let end = this.page * this.perPage
//   // this.currentPageData = this.orderList.splice(begin,end)
//   // if(end >= this.orderList.length){
//   //   this.num++
//   //   console.log(this.num);
//   //   this.getData(this.num)
//   // }

//         //上一页
//         // previous(){
//         //   if(this.page == 1) return
//         //   this.page--
//         //   this.Render()
//         // },
//         //下一页
//         // next(){
//         //   if(this.page == this.records) return
//         //   this.page++
//         //   this.Render()
//         // }
// }
</script>

<style lang="scss" scoped>
.el-pagination{
  text-align: center;
  margin-top: 30px;
}
  .order-list{
    width: 100%;
    margin: 0 auto;
    background-color:#f5f5f5;
    .wrapper{
      width: 80%;
      padding-top:33px;
      padding-bottom:110px;
      margin: 0 auto;
      .order-box{
        .no{
          display: none;
        }
        .order{
          border: 1px solid #d7d7d7;
          background-color:#232323;
          margin-bottom:31px;
          color: white;
          &:last-child{
            margin-bottom:0;
          }
          .order-title{
            height: 74px;
            line-height: 74px;
            // background-color:#fffaf7;
            padding:0 43px;
            font-size:16px;
            // color:#666;
            display: flex;
            justify-content: space-between;
            .item-info{
              span{
                margin:0 9px;
              }
            }
            .money{
              font-size:26px;
              // color:#333;
            }
          }
          .order-content{
            padding:0 43px;
            display: flex;
            justify-content: space-between;

            .good-box{
              width:70%;
              .good-list{
                display: flex;
                align-items: center;
                height:145px;
                .good-img{
                  width:112px;
                  height: 130px;
                  img{
                    width:100%;
                    height: 100%;
                  }
                }
                .good-name{
                  font-size:20px;
                  // color:#333;
                }
              }
            }
            .good-state{
              height: 45px;
              line-height: 45px;
              font-size: 20px;
              color:#f60;
              margin: 30px 0;
              text-align: right;
              display: flex;
              flex-direction: column;
              span{
                color:#f60;
              }
              .btn-group{
                font-size: 14px;
                a{
                  display: inline-block;
                  width: 80px;
                }
              }
            }
          }
        }
        .pagination{
          text-align:right;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active{
          background-color: #FF6600;
        }
        .el-button--primary{
          background-color: #FF6600;
          border-color: #FF6600;
        }
        .load-more,.scroll-more{
          text-align:center;
        }
      }
    }
  }
</style>